<template>
  <div class="content">
    <el-drawer :show-close="false" @close="emit('openClick', false)" :close-on-click-modal="false" destroy-on-close
      v-model="props.isOpen" :direction="direction">
      <!-- <template #header>
        <h2>设置</h2>
      </template> -->
      <template #default>
        <div>111</div>
      </template>
      <template #footer>
        <div class="flex">
          <div class="flexBtn">
            <el-button type="danger">点击前往下一站</el-button>
          </div>
          <div class="flexLast">
            <el-icon> <ArrowLeft /> </el-icon>
            <span class="text"> {{ 1 }} / {{ 2 }} </span>
            <el-icon> <ArrowRight /> </el-icon>
          </div>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ElMessageBox } from "element-plus"
import type { DrawerProps } from "element-plus"
import { ref } from "vue"
interface Emits {
  (e: "openClick", val: Boolean): void
}
const emit = defineEmits<Emits>()
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => ({})
  }
})
console.log(props.isOpen)

const direction = ref<DrawerProps["direction"]>("rtl")
function confirmClick () {
  ElMessageBox.confirm(`确定修改?`, {
    closeOnClickModal: false,
    confirmButtonText: "确认",
    cancelButtonText: "取消",
  })
    .then(() => {
      emit("openClick", false);
    })
    .catch(() => {
      // catch error
    })
}
</script>

<style scoped lang="scss">
.flex {
  display: flex;
  flex-direction: column;

  .flexBtn {
    display: flex;
    justify-content: center;
  }
  .flexLast {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    .text {
      padding: 0 30px;
    }
  }
}

.content {
  display: flex;
}
</style>
